<!--员工报表页面-->
<template>
<el-row class="container">
    <el-col :span="24" style="min-height:60px;height:5%;background-color: #014171;">
        <el-row>
            <el-col :span="10">
                <div class="logo">
                    <el-button type="primary" icon="el-icon-back" @click="showMainPage">&nbsp;&nbsp;{{$t("todaysales.returnBtnName")}}&nbsp;&nbsp;</el-button>
                </div>
            </el-col>
            <el-col :span="14">
                <div class="userinfo">
                    <template v-if="staffId!=''">
                        <el-button type="primary" icon="el-icon-printer" @click="print">{{$t("todaysales.reportPrintBtnName")}}</el-button>
                    </template>
                </div>
            </el-col>
        </el-row>
    </el-col>

    <el-col :span="24" style="margin-top:20px;padding-left:20px;padding-right:20px;">
        <choiceStaff ref="choiceStaff" :allowNoChoice="true" :clickEvent="true" @click="selectStaff" :checkAuth="true"></choiceStaff>
    </el-col>

    <el-col :span="24" style="height:5%;margin-top:10px;padding-left:20px;padding-right:20px;width:100%;">
        <div class="block">
            <span class="demonstration"></span>
            <el-date-picker style="width:100%;" @change="onPickDateEvent" v-model="queryDateScope" size="large" type="daterange" align="right" unlink-panels :range-separator="$t('report.route.shopReport.queryCond.dateRangeSplitTip')" :start-placeholder="$t('report.route.shopReport.queryCond.startDateTip')" :end-placeholder="$t('report.route.shopReport.queryCond.endDateTip')" :picker-options="pickerOptions">
            </el-date-picker>
        </div>
    </el-col>

    <el-col :span="24" style="height:90%;padding-left:20px;padding-right:20px;">
        <!--列表(查询结果-当前页)-->
        <el-table :data="saleReportRecords" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width:100%;" stripe border>
            <el-table-column type="index" :index="indexMethod" :label="$t('report.route.staffReport.table.xuhaoColumnName')" width="200" sortable>
            </el-table-column>
            <el-table-column prop="saleDate" :label="$t('report.route.staffReport.table.dateColumnName')" min-width="200" sortable>
                <template scope="scope">
                    <el-icon name="time"></el-icon>
                    <span style="margin-left: 10px">{{ scope.row.saleDate }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="saleMoney" :label="$t('report.route.staffReport.table.saleColumnName')" min-width="200" sortable>
            </el-table-column>
            <el-table-column prop="creditCardTip" :label="$t('report.route.staffReport.table.tipColumnName')" min-width="200" sortable>
            </el-table-column>
            <el-table-column prop="totalPrice" :label="$t('report.route.staffReport.table.countColumnName')" min-width="200" sortable>
            </el-table-column>
        </el-table>
        <el-col :span="24" class="toolbar">
            <el-row style="color:gray;">
                <el-col :span="3">
                    {{$t('report.route.staffReport.stat.saleMoney')}}
                </el-col>
                <el-col :span="3">
                    ${{reportStat.saleMoney}}
                </el-col>
                <el-col :span="3">
                    {{$t('report.route.staffReport.stat.creditCardTip')}}
                </el-col>
                <el-col :span="3">
                    ${{reportStat.creditCardTip}}
                </el-col>
                <el-col :span="3">
                    {{$t('report.route.staffReport.stat.specialProject')}}
                </el-col>
                <el-col :span="3">
                    ${{reportStat.specialProject}}
                </el-col>
                <el-col :span="3">
                    {{$t('report.route.staffReport.stat.staffSalary')}}
                </el-col>
                <el-col :span="3">
                    ${{reportStat.staffSalary}}
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="24" class="toolbar">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;">
            </el-pagination>
        </el-col>
    </el-col>

</el-row>
</template>

<script>
import {
    getShopDateSaleReport,
    getShopDateSaleSum,
    queryStaffDaysSalePrint
} from '../../api/api';
import util from '../../common/js/util'
import ChoiceStaff from '../../components/choiceStaff.vue';
//import { print } from 'util';
import {
    getLodop
} from '../../common/js/LodopFuncs';

export default {
    components: {
        choiceStaff: ChoiceStaff
    },
    data() {
        return {
            saleReportRecords: [],
            total: 0, //列表总条数
            pageSize: 10, //每页条数
            currentPage: 1, //当前页码
            listLoading: false,
            sels: [], //列表选中列       
            pickerOptions: {
                shortcuts: [{
                    text: this.$t('report.route.staffReport.queryCond.dateShortcutOneWeek'),
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: this.$t('report.route.staffReport.queryCond.dateShortcutOneMonth'),
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: this.$t('report.route.staffReport.queryCond.dateShortcutThreeMonth'),
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            queryDateScope: '', //以英文逗号分隔
            beginDate: '',
            endDate: '',
            beginDateUSA: '',
            endDateUSA: '',
            staffId: '',
            reportStat: {
                saleMoney: 0,
                creditCardTip: 0,
                staffSalary: 0,
                specialProject: 0
            }
        };
    },
    mounted() {
        this.getSaleReportRecords();
    },
    methods: {
        onPickDateEvent() {
            if (this.queryDateScope.toString() == '') {
                return;
            }
            var dateArr = this.queryDateScope.toString().split(',');
            this.beginDate = util.formatDate.format(new Date(dateArr[0]), 'yyyy-MM-dd');
            this.endDate = util.formatDate.format(new Date(dateArr[1]), 'yyyy-MM-dd');

            this.beginDateUSA = util.formatDate.format(new Date(dateArr[0]), 'MM-dd-yyyy');
            this.endDateUSA = util.formatDate.format(new Date(dateArr[1]), 'MM-dd-yyyy');

            this.getSaleReportRecords();
        },
        showMainPage() {
            //显示预约页面
            this.$router.push({
                path: '/report/index'
            });
        },
        selectStaff(user) {
            console.log("选中了员工：" + user.realName);
            if (user.selected == false) {
                this.staffId = "";
            } else {
                this.staffId = user.id;
            }
            this.getSaleReportRecords();
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getSaleReportRecords();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getSaleReportRecords();
        },
        selsChange: function (sels) {
            this.sels = sels;
        },
        //表格中的【序号】列的值生成方式
        indexMethod(index) {
            return index + 1 + (this.currentPage - 1) * this.pageSize;
        },
        print() {
            let para = {
                beginDate: this.beginDate,
                endDate: this.endDate,
                staffId: this.staffId
            };
            queryStaffDaysSalePrint(para).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    let result = res.data;
                    console.log(JSON.stringify(result));
                    this.listLoading = false;

                    let LODOP = getLodop(); //调用getLodop获取LODOP对象
                    if (typeof (LODOP) != "undefined") {
                        var initContentTop = 50; //初始化打印主内容的TOP高度
                        var lineHeight = 20; //每行的高度
                        //var beginDateStr = util.formatDate.parse(this.beginDate, 'MM-dd-yyyy'); //美国国家标准时间格式(月日年)
                        //var endDateStr = util.formatDate.parse(this.endDate, 'MM-dd-yyyy');
                        if (this.staffId != "") {
                            //#######员工周期报表-打印小票##########
                            LODOP.PRINT_INITA(0, 0, 580, 793, "打印员工周期报表小票");
                            var printHeight = 1200;
                            //if(result.projectStatList.length>4){
                                printHeight = printHeight + (result.projectStatList.length+2) * (lineHeight+20);
                            //}
                            LODOP.SET_PRINT_PAGESIZE(1, 580, printHeight, ""); //设置打印页大小(横向或纵向,宽度和高度)
                            LODOP.SET_PRINT_MODE("PRINT_NOCOLLATE", 1);
                            LODOP.ADD_PRINT_HTM(8, 0, "100%", "100%", "<div align=\"center\" style=\"font-weight:bold;\">" + this.$t("report.route.staffReport.print.title") + "</div>");
                            LODOP.ADD_PRINT_LINE(40, -7, 40, 377, 4, 0);
                            LODOP.ADD_PRINT_HTM(initContentTop, 0, "100%", "100%", "<div style=\"font-size:11px;\"><div style=\"float:left;\">" + this.$t("report.route.staffReport.print.beginDate") + this.beginDateUSA + "</div><div style=\"float:right;\">" + this.$t("report.route.staffReport.print.endDate") + this.endDateUSA + "</div></div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 1, 0, "100%", "100%", "<div style=\"height:1px;border-top:1px dashed #000;\"></div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 2, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("report.route.staffReport.print.orderCount") + result.orderNum + "</div>");

                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 3, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("report.route.staffReport.print.cashSale") + util.formatMoney(result.cashSale == undefined ? 0 : result.cashSale, 2) + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 4, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("report.route.staffReport.print.creditCardSale") + util.formatMoney(result.creditCardSale == undefined ? 0 : result.creditCardSale, 2) + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 5, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("report.route.staffReport.print.giftCardSale") + util.formatMoney(result.giftCardSale == undefined ? 0 : result.giftCardSale, 2) + "</div>");
                            var isGiftPayLinenum = 0;
                            if (result.giftCardSale != undefined && result.giftCardSale > 0) {
                                isGiftPayLinenum = 2;
                                LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 6, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("report.route.staffReport.print.giftCashSale") + util.formatMoney(result.giftCashSale == undefined ? 0 : result.giftCashSale, 2) + "</div>");
                                LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 7, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("report.route.staffReport.print.giftCreditSale") + util.formatMoney(result.giftCreditSale == undefined ? 0 : result.giftCreditSale, 2) + "</div>");
                            }
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (6 + isGiftPayLinenum), 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("report.route.staffReport.print.subtotal") + util.formatMoney(result.orderTotal == undefined ? 0 : result.orderTotal, 2) + "</div>");
                            //LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (7 + isGiftPayLinenum), 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("report.route.staffReport.print.newGiftCardSale") + util.formatMoney(result.newGiftCardSale == undefined ? 0 : result.newGiftCardSale, 2) + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (7 + isGiftPayLinenum), 0, "100%", "100%", "<div style=\"height:1px;border-top:1px dashed #000;padding:0;margin:0;\"></div>");

                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (8 + isGiftPayLinenum), 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("report.route.staffReport.print.creditCardTip") + util.formatMoney(result.creditCardTip == undefined ? 0 : result.creditCardTip, 2) + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (9 + isGiftPayLinenum), 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("report.route.staffReport.print.specialProject") + util.formatMoney(result.specialProject == undefined ? 0 : result.specialProject, 2) + "</div>");

                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (10 + isGiftPayLinenum), 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("report.route.staffReport.print.salaryMode") + "</div>");

                            if (result.salaryMode == 1) {
                                LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (11 + isGiftPayLinenum), 0, "100%", "100%", "<div style=\"font-size:11px;\">&nbsp;&nbsp;&nbsp;&nbsp;" + this.$t("report.route.staffReport.print.baseSalary") + (result.baseSalary == undefined ? 0 : result.baseSalary) + "</div>");
                            }
                            if (result.salaryMode == 2) {
                                LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (11 + isGiftPayLinenum), 0, "100%", "100%", "<div style=\"font-size:11px;\">&nbsp;&nbsp;&nbsp;&nbsp;" + this.$t("report.route.staffReport.print.commission") + (result.commission == undefined ? 0 : result.commission) + "%</div>");
                            }
                            if (result.salaryMode == 3) {
                                LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (11 + isGiftPayLinenum), 0, "100%", "100%", "<div style=\"font-size:11px;\">&nbsp;&nbsp;&nbsp;&nbsp;" + this.$t("report.route.staffReport.print.baseSalary") + (result.baseSalary == undefined ? 0 : result.baseSalary) + " + " + this.$t("report.route.staffReport.print.commission") + (result.commission == undefined ? 0 : result.commission) + "%</div>");
                            }
                            if (result.salaryMode == 4) {
                                LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (11 + isGiftPayLinenum), 0, "100%", "100%", "<div style=\"font-size:11px;\">&nbsp;&nbsp;&nbsp;&nbsp;" + this.$t("report.route.staffReport.print.baseSalary") + (result.baseSalary == undefined ? 0 : result.baseSalary) + " / " + this.$t("report.route.staffReport.print.commission") + (result.commission == undefined ? 0 : result.commission) + "%</div>");
                            }

                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (12+ isGiftPayLinenum), 0, "100%", "100%", "<div style=\"height:1px;border-top:1px dashed #000;\"></div>");

                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (13 + isGiftPayLinenum), 0, "100%", "100%", "<div style=\"font-size:12px;font-weight:bold;text-align:right;\">" + this.$t("report.route.staffReport.print.salary") + util.formatMoney(result.salary == undefined ? 0 : result.salary, 2) + "</div>");

                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (14 + isGiftPayLinenum), 0, "100%", "100%", "<div style=\"height:1px;border-top:1px dashed #000;\"></div>");

                            
                            var staffSaleProjectStatLine = 15 + isGiftPayLinenum;
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * staffSaleProjectStatLine, 0, "100%", "100%", "<ul style=\"font-size:11px;list-style:none;font-weight:bold;margin:0;padding:0;\"><li style=\"list-style:none;float:left;width:40%;text-align:left;\">" + this.$t('collectmoney.print.projectName') + "</li><li style=\"list-style:none;float:left;width:20%;text-align:right;\">" + this.$t('collectmoney.print.projectPrice') + "</li><li style=\"list-style:none;float:left;width:20%;text-align:right;\">" + this.$t('collectmoney.print.projectNumber') + "</li><li style=\"list-style:none;float:left;width:20%;text-align:right;\">" + this.$t('collectmoney.print.projectMoney') + "</li></ul>");
                            for(var i=0;i<result.projectStatList.length;i++){
                                var projectItem = result.projectStatList[i];
                                LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (staffSaleProjectStatLine + i+1), 0, "100%", "100%", "<ul style=\"font-size:11px;list-style:none;margin:0;padding:0;\"><li style=\"list-style:none;float:left;width:40%;text-align:left;\">" + projectItem.projectName + "</li><li style=\"list-style:none;float:left;width:20%;text-align:right;\">" + projectItem.price + "</li><li style=\"list-style:none;float:left;width:20%;text-align:right;\">" + projectItem.projectNum + "</li><li style=\"list-style:none;float:left;width:20%;text-align:right;\">" + util.math.multi(projectItem.projectNum, projectItem.price) + "</li></ul>");
                            }
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (staffSaleProjectStatLine+result.projectStatList.length+1), 0, "100%", "100%", "<div style=\"height:1px;border-top:1px dashed #000;\"></div>");


                            LODOP.PRINT();
                        }
                    }
                }
            });

            //-------------------------
            //from：月-日-年 to 月-日-年
            //-------------------------
            //orders：150
            //Cash Sales:$800.00
            //Credit Card Sales:$1000.00

            //Salary Type:Base + 10% commission
            //Base Salary:50 per day * 7 days = $350.00

            //Commission:$180.00（总营业额+提成比例）
            //Credit Card Tips:$100.00
            //直接接入工资的项目：$20.00
            //Total Salary:$350+$180.00+$100.00+$20.00=$650.00

        },
        getSaleReportRecords() {
            let para = {
                pageSize: this.pageSize,
                pageNum: this.currentPage,
                beginDate: this.beginDate,
                endDate: this.endDate,
                staffId: this.staffId
            };
            getShopDateSaleReport(para).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    this.total = res.data.total;
                    this.saleReportRecords = res.data.list;
                    this.listLoading = false;
                }
            });
            getShopDateSaleSum(para).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    if (res.data != null) {
                        this.reportStat = res.data;
                    } else {
                        this.reportStat.saleMoney = 0;
                        this.reportStat.creditCardTip = 0;
                        this.reportStat.staffSalary = 0;
                        this.reportStat.specialProject = 0;
                    }
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~scss_vars';

.container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #012547;
    font-family: Helvetica, Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
}

.nav {
    display: flex;
    justify-content: Center;
    align-items: Center;
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    font-size: 48px;
}

.userinfo {
    display: flex;
    justify-content: left;
    align-items: Center;
    text-align: right;
    padding-right: 35px;
    float: right;
    height: 60px;
}

.logo {
    display: flex;
    justify-content: left;
    align-items: Center;
    height: 60px;
    font-size: 26px;
    padding-left: 20px;
    padding-right: 20px;
}
</style>
